<template>
  <el-row v-if="users">
    <transition-group name="fade-out">
      <el-col v-show="showHistory" key="history" :span="8">
        <History :records="historyRecords" />
      </el-col>
      <el-col key="user-list" :span="showHistory?16:24" class="user-list">
        <UserItem
          v-for="u in users"
          :key="u"
          :user="u"
          :selected="selected[u]"
          @selectedChanged="v=>handleSelected(u,v)"
          @dblClick="$emit('requireDetail',u)"
        >
          <template v-if="loadStep&&usersStatus[u]" #description>
            <el-tooltip v-if="!usersStatus[u].isCompleteFlow" effect="light">
              <template #content>
                <div v-if="currentStep(u)">
                  <div>第{{ partyJoinStepsIndex[currentStep(u).id] +1 }}步：{{ currentStep(u).description }}</div>
                </div>
                <div v-else>当前未进行任何流程</div>
              </template>
              <div class="item-description">{{ currentStep(u).alias || '无' }}</div>
            </el-tooltip>
            <div v-else class="item-description">已完成流程</div>
          </template>
        </UserItem>
        <transition-group v-if="showSubmit" name="breadcrumb">
          <el-button
            v-if="innerSelectedUsers.length<users.length"
            key="user-btn-all"
            type="text"
            @click="innerSelectedUsers = users"
          >全选</el-button>
          <el-button
            v-if="innerSelectedUsers.length>0"
            key="user-btn-submit"
            type="text"
            @click="$emit('requireEdit',innerSelectedUsers)"
          >发展</el-button>
        </transition-group>
      </el-col>
    </transition-group>
  </el-row>
</template>

<script>
import { infos } from '@/api/zzxt/party-join'
export default {
  name: 'CardDetailContent',
  components: {
    UserItem: () => import('./UserItem'),
    History: () => import('./History')
  },
  props: {
    users: { type: Array, default: null },
    selectedUsers: { type: Array, default: null },
    loadStep: { type: Boolean, default: false },
    showSubmit: { type: Boolean, default: true },
    showHistory: { type: Boolean, default: false },
    historyRecords: { type: Array, default: null }
  },
  data: () => ({
    selected: {},
    usersStatus: {}
  }),
  computed: {
    partyJoinStepsIndex() {
      return this.$store.state.partyJoin.partyJoinStepsIndex
    },
    innerSelectedUsers: {
      get() {
        const dict = this.selected
        return this.users.filter(i => dict[i])
      },
      set(val) {
        val = val || []
        const s = {}
        val.forEach(i => (s[i] = true))
        this.selected = s
      }
    }
  },
  watch: {
    selectedUsers: {
      handler(val) {
        this.innerSelectedUsers = val
      },
      deep: true,
      immediate: true
    },
    users: {
      handler(val) {
        if (!val || !this.loadStep) return
        this.loadUsersInfos()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    currentStep(u) {
      const item = this.usersStatus[u] || {}
      return item && item.currentStep
    },
    loadUsersInfos() {
      const { users } = this
      infos({ users }).then(data => {
        const dict = {}
        data.list.forEach(u => {
          dict[u.userId] = u
        })
        this.usersStatus = dict
      })
    },
    handleSelected(u, v) {
      this.$set(this.selected, u, v)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/element-variables';
.user-list {
  display: grid;
  grid-template-columns: min-content min-content min-content min-content min-content;
}
.item-description {
  height: 1rem;
  text-align: center;
  color: $--color-primary;
}
</style>
